<template>
  <div ref="wrapper_hook" class="wrapper" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'line2',
  props: {
    sourceData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    sourceData (newValue) {
      this._initECharts(newValue)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initECharts(this.sourceData)
      window.addEventListener('resize', this.resize)
    })
  },
  destroyed () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    _initECharts (data) {
      // if (!data || data.length === 0) return
      this.chart ? this.update(data) : this.draw(data)
    },

    returnSpan (background) {
      return `<span style="display: inline-block;width: 10px;height: 10px;border-radius:14px; background: ${background}"></span>`
    },
    formatter (params) {
      let html = ''
      let headHtml = ''
      let speedHtml
      let flowHtml
      if (this.type === 'A') {
        speedHtml = this.returnSpan('#50eef9')
        flowHtml = this.returnSpan('#7718f6')
      } else {
        speedHtml = this.returnSpan('#e1eb40')
        flowHtml = this.returnSpan('#ed9b54')
      }
      params.forEach(item => {
        headHtml = `<div>时间段: ${item.name}</div>`
        const typeDom = item.seriesName === '今日' ? speedHtml : flowHtml
        html += `<div>${typeDom} ${item.seriesName}：${item.data} (辆/小时)</div>`
      })
      headHtml += html
      return headHtml
    },
    getSeriesData (params) {
      return {
        name: params.name,
        type: 'line',
        data: params.data,
        smooth: true,
        symbolSize: 5,
        label: {
          show: true,
          position: 'top',
          color: '#8d8d8d'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(249,80,221,0.71)' },
            { offset: 1, color: 'rgba(80,238,249,0.0)' }
          ])
        },
        itemStyle: {
          normal: {
            color: 'rgb(249,80,221)',
            width: 0
          }
        }
      }
    },
    getSeriesArr (today, yesterday) {
      const seriesArr = []
      seriesArr.push(
        this.getSeriesData({
          data: today,
          type: 'line',
          smooth: true,
          name: '今日',
          color: '#50eef9',
          LinearGradient: [
            { offset: 0, color: 'rgba(24,181,246,0.8)' },
            { offset: 0.5, color: 'rgba(24,181,246,0.2)' },
            { offset: 1, color: 'rgba(24,181,246,0)' }
          ]
        }),
        this.getSeriesData({
          data: yesterday,
          name: '昨日',
          smooth: true,
          color: '#7718f6',
          LinearGradient: [
            { offset: 0, color: 'rgba(119,24,246,0.8)' },
            { offset: 0.5, color: 'rgba(119,24,246,0.2)' },
            { offset: 1, color: 'rgba(119,24,246,0)' }
          ]
        })
      )
      return seriesArr
    },

    normalizeData (data) {
      const time = []
      const today = []
      const yesterday = []
      for (let i = 0; i < data.length; i++) {
        time.push(data[i].time)
        today.push(data[i].today < 0 ? '' : data[i].today)
        yesterday.push(data[i].yesterday < 0 ? '' : data[i].yesterday)
      }
      return { time, today, yesterday }
    },
    draw (data) {
      const { today, yesterday, time } = this.normalizeData(data)
      this.chart = echarts.init(this.$refs.wrapper_hook)
      const options = {
        title: {
          padding: [20, 0, 0, 10],
          text: '业务趋势',
          textStyle: {
            color: '#0a3453'
          },
          subtext: '订单、金额、台数趋势',
          subtextStyle: {

          }
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross',
          }
        },
        legend: {
          left: 'right',
          top: 40,
          data: ['今日', '昨日'],
          itemWidth: 24,
          itemHeight: 11,
          textStyle: {
            color: '#9aa2a8'
          }
        },
        grid: {
          left: '2%',
          top: '40%',
          right: '2%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: time,
          axisTick: {
            show: false,
            alignWithLabel: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#C7C7C7FF'
            }
          },
          axisLabel: {
            alignWithLabel: true,
            color: '#5a5a5a',
            size: 14,
            // interval: 1,
            // padding: [20, 0, 0, 0],
            align: 'center'
          },
          splitLine: false
        },
        yAxis: [
          {
            name: '速度/小时',
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#b4b4b4'
              }
            }
          }
        ],
        series: [
          {
            name: '今日',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true,
            symbolSize: 5,
            label: {
              show: true,
              position: 'top',
              fontSize:12,
              color: '#8d8d8d'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(80,238,249,0.71)' },
                { offset: 1, color: 'rgba(80,238,249,0.0)' }
              ])
            },
            itemStyle: {
              normal: {
                color: '#50eef9',
                width: 0
              }
            }
          },
          {
            name: '昨日',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330, 410],
            smooth: true,
            symbolSize: 5,
            label: {
              show: true,
              fontSize:12,
              position: 'top',
              color: '#8d8d8d'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(249,80,221,0.71)' },
                { offset: 1, color: 'rgba(80,238,249,0.0)' }
              ])
            },
            itemStyle: {
              normal: {
                color: 'rgb(249,80,221)',
                width: 0
              }
            }
          }
        ]
      }
      this.chart.setOption(options)
    },
    update (data) {
      if (!this.chart) return
      const { today, yesterday, time } = this.normalizeData(data)
      const options = this.chart.getOption()
      options.tooltip[0].formatter = params => this.formatter(params)
      options.xAxis[0].data = time
      options.series = this.getSeriesArr(today, yesterday)
      this.chart.setOption(options, true)
    },
    resize (delay = 400) {
      setTimeout(() => {
        this.chart && this.chart.resize()
      }, delay)
    }
  }
}
</script>

<style  scoped>
  .wrapper {
    width: 100%;
    height:280px;
  }
</style>
